<template>
  <div v-for="(item, index) in StoreMenu.menuList" :key="index" class="category-views">
    <a-dropdown>
      <a-button v-if="StoreMenu.x === index" type="primary">
        {{ item.title }}
        <DownOutlined />
      </a-button>
      <a v-else class="ant-dropdown-link" @click.prevent>
        <span>
          {{ item.title }}
          <DownOutlined />
        </span>
      </a>
      <template #overlay>
        <div style="width: 250px">
          <a-menu theme="dark">
            <a-menu-item
              v-for="(item1, index1) in item.menu.filter((m) => !m.hiddenMenu)"
              :key="item1.label"
              @click="menu_click(index, index1)"
            >
              {{ item1.label }}
            </a-menu-item>
          </a-menu>
        </div>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'

import { useStoreMenu } from '@/pinia/menuList'

export default defineComponent({
  components: {
    DownOutlined,
  },
  emits: ['evt_menu_click'],
  setup(props, ctx) {
    const StoreMenu = useStoreMenu()

    const menu_click = (index, index1) => {
      ctx.emit('evt_menu_click', { index, index1 })
    }
    return {
      menu_click,
      StoreMenu,
    }
  },
})
</script>
